<template>
  <div style="width: 70%;margin: 0 auto;background-color: #fdfdfd;border-radius: 12px;padding: 40px 15px">
    <el-collapse-transition>
      <div v-show="!edit_usr_info_status" class="usr_info shadow item" style="position: relative">
        <el-button class="edit_button" icon="el-icon-edit" type="primary" size="mini" plain
                   style="position: absolute;right: -50px"
                   @click="edit_usr_info"
        ></el-button>
        <el-row class="shadow clearfix" style="padding: 5px 15px;border-radius: 8px">
          <el-col :span="18" class="usr_info_left_box">
            <h2 style="font-size: 32px;text-align: left;padding: 0 0 20px">{{ usr.real_name }}</h2>
            <ul>
              <li>{{ usr.phone_num }}</li>
              <li>{{ usr.e_mail }}</li>
              <li>{{ usr.gender }}</li>
              <li>生日：{{ usr.birthday }}</li>
            </ul>
            <ul style="margin-bottom: 0">
              <li>{{ usr.province }}-{{ usr.city }}</li>
              <li>{{ usr.school }}</li>
              <li>{{ usr.xueli }}</li>
              <li>{{ usr.major }}</li>
              <li>{{ usr.now_status }}</li>
            </ul>
          </el-col>
          <el-col :span="3" :push="3" class="usr_info_right_box">
            <el-avatar
                :src="usr.head_img_src?usr.head_img_src:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                :size="120"
            >
              <template #error>
                <div class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </template>
            </el-avatar>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <el-collapse-transition>
      <div v-show="edit_usr_info_status" style="text-align: left" class="first-box">
        <h3 style="text-align: center;font-size: 30px">编辑个人信息</h3>
        <el-row>
          <el-col :span="8" :push="2">
            <span class="info_title">姓名：</span>
            <el-input class="input" v-model="edit_usr_info_data.real_name"></el-input>
          </el-col>
          <el-col :span="8" :push="6" style="">
            <span class="info_title">上传照片</span>
            <el-upload
                class="avatar-uploader"
                action="http://121.199.69.124:5826/up/img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :name="'png'"
            >
              <img v-if="edit_usr_info_data.head_img_src" :src="edit_usr_info_data.head_img_src" class="avatar"
                   alt="修改头像">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 jpg 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <span class="info_title">手机号：</span>
            <el-input v-model="edit_usr_info_data.phone_num"></el-input>
          </el-col>
          <el-col :span="8" :push="6" style="">
            <span class="info_title">邮箱</span>
            <el-input v-model="edit_usr_info_data.e_mail"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <span class="info_title">居住地：</span>
            <el-row>
              <el-col :span="11">
                <el-select v-model="edit_usr_info_data.province" @change="get_city_list">
                  <el-option
                      v-for="province in province_list"
                      :key="province.provinceCode"
                      :value="province.label">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :push="2" :span="11">
                <el-select v-model="edit_usr_info_data.city">
                  <el-option
                      v-for="city in city_list"
                      :key="city.cityCode"
                      :value="city.cityName">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8" :push="6" style="">
            <span class="info_title">性别</span>
            <el-row>

              <el-col :span="12">
                <el-radio style="width: 80%" v-model="usr.gender" label="男" border>男</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio style="width: 80%" v-model="usr.gender" label="女" border>女</el-radio>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2" style="">
            <span class="info_title">毕业学校</span>
            <el-input v-model="edit_usr_info_data.school"></el-input>
          </el-col>
          <el-col :span="8" :push="6" style="">
            <span class="info_title">专业</span>
            <el-input v-model="edit_usr_info_data.major"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :push="2">
            <span class="info_title">学历：</span>
            <div style="width: 100%">
              <el-select v-model="edit_usr_info_data.xueli">
                <el-option
                    v-for="item in ['初中','高中','专科','本科','研究生','博士及以上']"
                    :key="item"
                    :label="item"
                    :value="item"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8" :push="6">
            <span class="info_title">目前状态：</span>
            <div style="width: 100%">
              <el-select v-model="edit_usr_info_data.now_status">
                <el-option
                    v-for="item in ['在校生','应届毕业','在职-月内到岗','离职-随时到岗','稳定']"
                    :key="item"
                    :label="item"
                    :value="item"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :push="16" :span="8">
            <el-button @click="edit_usr_info_status=!edit_usr_info_status" type="danger" plain>放弃修改</el-button>
            <el-button
                @click="usr=JSON.parse(JSON.stringify(edit_usr_info_data));edit_usr_info_status=!edit_usr_info_status"
                type="success" plain>保存修改
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
    <el-divider content-position="left"><span style="font-size: 18px">教育经历</span></el-divider>
    <template v-for="(exp,index) in usr.exps" :key="exp">
      <el-collapse-transition>
        <div v-show="!edit_usr_exp_status[index]" class="item" style="position: relative">
          <el-button class="edit_button" icon="el-icon-edit" type="primary" size="mini" plain
                     style="position: absolute;right: -50px"
                     @click="edit_usr_exp(exp,index)"
          ></el-button>
          <el-row class="exp">
            <el-col :span="5" class="exp_title">{{ exp.schoolName }}</el-col>
            <el-col :span="5" class="exp_title">{{ exp.majorName }}</el-col>
            <el-col :span="3" class="exp_title">{{ exp.xueli }}</el-col>
            <el-col :span="24">
              <div style="width: 90%;margin: 0 auto;text-align: left;text-indent: 2rem;line-height: 1.5rem"
                   v-html="exp.intro">
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
      <el-collapse-transition>
        <div v-show="edit_usr_exp_status[index]" style="text-align: left;width: 90%;margin: 0 auto">
          <el-card>
            <template #header>
              <h2>编辑教育经历</h2>
            </template>
            <el-row>
              <el-col :span="12">
                <span class="info_title">学校名称</span>
                <div style="width: 100%;">
                  <el-select
                      v-model="edit_usr_exp_data.schoolName"
                      remote
                      filterable
                      reserve-keyword
                      placeholder="请输入关键词"
                      :remote-method="get_school_list"
                      :loading="loading">
                    <el-option
                        v-for="item in school_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="40" style="">
              <el-col :span="6">
                <span class="info_title">学历</span>
                <div style="width: 100%">
                  <el-select v-model="edit_usr_exp_data.xueli">
                    <el-option
                        v-for="item in ['初中','高中','专科','本科','研究生','博士及以上']"
                        :key="item"
                        :label="item"
                        :value="item"
                    ></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="15">
                <span class="info_title">专业</span>
                <div style="width: 100%;">
                  <el-select
                      v-model="edit_usr_exp_data.majorName"
                      remote
                      filterable
                      reserve-keyword
                      placeholder="请输入关键词"
                      :remote-method="get_major_list"
                      :loading="loading">
                    <el-option
                        v-for="item in major_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <span class="info_title">在校经历</span>
              <div style="width: 100%">
                <edit_panel v-model="edit_usr_exp_data.intro"></edit_panel>
              </div>
            </el-row>
            <div style="float:right;margin: 10px 0">
              <el-button style="" type="warning" @click="initStatus" plain>取消</el-button>
              <el-button style="" type="danger" @click="del_exp" plain>删除</el-button>
              <el-button style="" type="success" @click="save_exp" plain>保存</el-button>
            </div>
          </el-card>
        </div>
      </el-collapse-transition>
    </template>
    <el-divider content-position="left"><span style="font-size: 18px">专业能力</span></el-divider>
    <div style="list-style: none;text-align: left;margin: 0 auto;"
         :style="{padding:!edit_usr_skills_status?'0':'20px 0'}">
      <el-collapse-transition>
        <div v-show="!edit_usr_skills_status" class="item exp" style="padding: 20px 5%;">
          <el-button class="edit_button" icon="el-icon-edit" type="primary" size="mini" plain
                     style="position: absolute;right: -50px"
                     @click="edit_usr_skills()"
          ></el-button>
          <div style="line-height: 2rem" v-html="usr.skills"></div>
        </div>
      </el-collapse-transition>
      <el-collapse-transition>
        <div style="width: 90%;margin: 0 auto;" v-show="edit_usr_skills_status">
          <el-card>
            <template #header>
              <h2>编辑专业能力</h2>
            </template>
            <edit_panel v-model="edit_usr_skills_data"></edit_panel>
            <div style="float:right;margin: 10px 0">
              <el-button style="" type="warning" @click="initStatus" plain>取消</el-button>
              <el-button style="" type="success" @click="save_skills" plain>保存</el-button>
            </div>
          </el-card>
        </div>
      </el-collapse-transition>
    </div>
    <el-divider content-position="left"><span style="font-size: 18px">项目经历</span></el-divider>
    <template v-for="(item,index) in usr.items" :key="item">
      <el-collapse-transition>
        <el-row v-show="!edit_usr_item_status[index]" class="exp item">
          <el-button class="edit_button" icon="el-icon-edit" type="primary" size="mini" plain
                     style="position: absolute;right: -50px"
                     @click="edit_usr_item(item,index)"
          ></el-button>
          <el-col :span="5" class="exp_title">{{ item.item_name }}</el-col>
          <el-col :span="5" class="exp_title">{{ item.item_work }}</el-col>
          <el-col :span="24">
            <div style="width: 90%;margin: 0 auto;text-align: left;text-indent: 2rem;line-height: 1.5rem"
                 v-html="item.intro">
            </div>
          </el-col>
        </el-row>
      </el-collapse-transition>
      <el-collapse-transition>
        <div v-show="edit_usr_item_status[index]" style="padding: 20px 0;width: 90%;margin: 0 auto">
          <el-card>
            <template #header>
              <h2>编辑项目——{{ edit_usr_item_data.item_name }}</h2>
            </template>
            <el-input clearable style="margin: 0 0 10px" v-model="edit_usr_item_data.item_name">
              <template #prepend>
                项目名称
              </template>
            </el-input>
            <el-input clearable style="margin: 10px 0 20px" v-model="edit_usr_item_data.item_work">
              <template #prepend>
                项目角色
              </template>
            </el-input>
            <edit_panel v-model="edit_usr_item_data.intro"></edit_panel>
            <div style="float:right;margin: 10px 0">
              <el-button style="" type="warning" @click="initStatus" plain>取消</el-button>
              <el-button style="" type="success" @click="save_item" plain>保存</el-button>
            </div>
          </el-card>
        </div>
      </el-collapse-transition>
    </template>
  </div>
</template>

<script>
import {} from 'vue';
// eslint-disable-next-line no-unused-vars
import {getProvince, getCity} from '@/Area'
import Edit_panel from "@/components/edit_panel";

export default {
  name: "usr_admin_grjj",
  components: {'edit_panel': Edit_panel},
  setup() {
    return {
      value: (''),
      province_list: [],
      city_list: [],
    }
  },
  data() {
    return {
      date_time_1: '',
      date_time_2: '',
      date_time_3: '',
      edit_usr_info_status: false,
      edit_usr_exp_status: [],
      edit_usr_skills_status: false,
      edit_usr_item_status: [],
      edit_usr_info_data: {},
      edit_usr_exp_data: {},
      edit_usr_skills_data: {},
      edit_usr_item_data: {},
      edit_usr_exp_index: 0,
      edit_usr_item_index: 0,
      major_list: [],
      school_list: [],
      loading: false,
      usr: {
        uid: '100001',
        real_name: '测试用户',
        phone_num: '13700000000',
        e_mail: '1234567890@qq.com',
        school: '山东财经大学',
        xueli: '本科',
        major: '计算机科学与技术',
        year_old: '00',
        province: '山东省',
        city: '济南市',
        gender: '男',
        birthday: '1900.1',
        now_status: '在校生',
        head_img_src: '',
        exps: [
          {
            schoolName: '山东财经大学',
            majorName: '计算机科学与技术',
            xueli: '本科',
            intro: '<p>我说啥都会  我做啥都对  你说你就对</p>'
          }, {
            schoolName: '清华大学',
            majorName: '计算机科学与技术',
            xueli: '研究生',
            intro: '<p>我说啥都会  我做啥都对  你说你就对</p>'
          },
        ],
        skills: '<p>掌握C、Java、Python等语言，参加竞赛以C++为主，日常开发以Python为主</p><p>掌握爬虫、数据分析、数据挖掘等技术，借助相关技术抓取教务系统接口开发相关网站为同学提供便利</p><p>掌握H5、CSS3等技术，独自开发多个网站，其中包括完整电商网站、信息发布网站等，后端使用Django开发</p>',
        items: [
          {
            item_name: '集采优鲜-冷链电商',
            item_work: '网站开发',
            intro: '<p>“集采优鲜”是我们创业团队针对大学校园消费群体对生鲜果蔬类农产品的购物细分市场推出的电子商务平台，平台采用集中采购、集中配送的方式降低采购及配送成本，前期以采购山东省内生鲜果蔬为主，以山东财经大学圣井校区1万余人为示范，采取以校区为单元的营销和配送单位，每个校区设置一个采购平台和运营配送中心，后期逐渐网络化、规模化。平台构建了农村家庭（农户）-集中采购供应链运输（第三方）-终端配送（高校服务站）的全链条服务体系，同时采用信息化平台和物联网设备及追溯技术实现了农产品从种植、采摘到运输、配送的全过程监管。</p><p>平台为高校师生提供优质的服务，不仅可以降低30%的果蔬农产品采购成本，还可以从源头把控品质，努力为新冠肺炎疫情之后农产品滞销难题尽一份力。</p><p>我们的生鲜电商平台目前已经具备了与同行业竞争的基本条件：1.考虑了手机客户端三级分销理念，使每个人都有做主权力；2.具备存储能力强的数据库：容纳更多的客户与商家数据；3.配有稳定的合作企业：云鸟科技与菜鸟网络；4.成熟的顾客喜好分析算法：精准的为购买过的顾客提供喜好推荐等。</p>',
          }, {
            item_name: '集采优鲜-冷链电商',
            item_work: '网站开发',
            intro: '<p>“集采优鲜”是我们创业团队针对大学校园消费群体对生鲜果蔬类农产品的购物细分市场推出的电子商务平台，平台采用集中采购、集中配送的方式降低采购及配送成本，前期以采购山东省内生鲜果蔬为主，以山东财经大学圣井校区1万余人为示范，采取以校区为单元的营销和配送单位，每个校区设置一个采购平台和运营配送中心，后期逐渐网络化、规模化。平台构建了农村家庭（农户）-集中采购供应链运输（第三方）-终端配送（高校服务站）的全链条服务体系，同时采用信息化平台和物联网设备及追溯技术实现了农产品从种植、采摘到运输、配送的全过程监管。</p><p>平台为高校师生提供优质的服务，不仅可以降低30%的果蔬农产品采购成本，还可以从源头把控品质，努力为新冠肺炎疫情之后农产品滞销难题尽一份力。</p><p>我们的生鲜电商平台目前已经具备了与同行业竞争的基本条件：1.考虑了手机客户端三级分销理念，使每个人都有做主权力；2.具备存储能力强的数据库：容纳更多的客户与商家数据；3.配有稳定的合作企业：云鸟科技与菜鸟网络；4.成熟的顾客喜好分析算法：精准的为购买过的顾客提供喜好推荐等。</p>',
          }
        ],
      },
    }
  },
  mounted() {
    this.province_list = getProvince()
    this.edit_usr_info_data = JSON.parse(JSON.stringify(this.usr))
    if (this.usr.province) this.city_list = getCity(this.usr.province)
    for (let i = 0; i < this.usr.exps.length; i++) {
      this.edit_usr_exp_status.push(false)
    }
    for (let i = 0; i < this.usr.items.length; i++) {
      this.edit_usr_item_status.push(false)
    }
  },
  methods: {
    get_major_list(query) {
      this.loading = true
      this.$axios.get(
          'http://121.199.69.124:5826/get/major',
          {
            params: {
              query: query
            }
          }
      ).then((response) => {
        this.major_list = response.data.data
        this.loading = false
      })
    },
    get_school_list(query) {
      this.$axios.get(
          'http://121.199.69.124:5826/get/school',
          {
            params: {
              query: query
            }
          }
      ).then((response) => {
        this.school_list = response.data.data
      })
    },
    initStatus() {
      for (let i = 0; i < this.usr.exps.length; i++) {
        this.edit_usr_exp_status[i] = false
      }
      for (let i = 0; i < this.usr.items.length; i++) {
        this.edit_usr_item_status[i] = false
      }
      this.edit_usr_info_status = false
      this.edit_usr_skills_status = false
    },
    change() {
      // let month = new Date(this.date_time_3).getMonth()
      let year = new Date(this.date_time_3).getFullYear()
      let nowYear = new Date().getFullYear()
      // let nowMonth = new Date().getMonth()
      let years = nowYear - year;
      // let months = nowMonth - month;
      this.usr.year_old = years
    },
    edit_usr_info() {
      this.edit_usr_info_status = !this.edit_usr_info_status
    },
    edit_usr_exp(exp, index) {
      this.edit_usr_exp_index = index
      this.initStatus()
      this.edit_usr_exp_status[index] = !this.edit_usr_exp_status[index]
      this.edit_usr_exp_data = JSON.parse(JSON.stringify(exp))
      this.get_major_list(this.edit_usr_exp_data.majorName)
    },
    edit_usr_skills() {
      this.edit_usr_skills_data = JSON.parse(JSON.stringify(this.usr.skills))
      this.edit_usr_skills_status = !this.edit_usr_skills_status
    },
    handleAvatarSuccess(res, file) {
      this.edit_usr_info_data.head_img_src = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 0.5;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!');
      }
      return isJPG && isLt2M;
    },
    get_city_list() {
      this.city_list = getCity(this.edit_usr_info_data.province)
    },
    del_exp() {
      this.initStatus()
      this.usr.exps.splice(this.edit_usr_exp_index, 1)
    },
    save_exp() {
      this.usr.exps[this.edit_usr_exp_index] = JSON.parse(JSON.stringify(this.edit_usr_exp_data))
      this.initStatus()
    },
    save_skills() {
      this.usr.skills = JSON.parse(JSON.stringify(this.edit_usr_skills_data))
      this.initStatus()
    },
    save_item() {
      this.usr.items[this.edit_usr_item_index] = JSON.parse(JSON.stringify(this.edit_usr_item_data))
      this.initStatus()
    },
    edit_usr_item(item, index) {
      this.initStatus()
      this.edit_usr_item_status[index] = true
      this.edit_usr_item_data = item
      this.edit_usr_item_index = index
    }
  }
}
</script>

<style scoped>
.info_title {
  font-size: 14px;
  text-align: left;
  display: inline-block;
  padding: 14px 0;
}

.first-box .el-input >>> .el-input__inner {
  font-size: 12px;
}

.first-box .el-input >>> .el-input__inner:hover {
  border-color: #409EFF;
}

.usr_info {
  width: 100%;
}

.usr_info .usr_info_left_box ul {
  margin: 15px 0;
  display: block;
  height: 20px;
}

.usr_info .usr_info_left_box ul li {
  float: left;
  list-style: none;
  /*display: inline-block;*/
  line-height: 20px;
  padding: 0 15px;
  border-right: 1px solid #bababa;
  font-size: 13px;
}

.usr_info .usr_info_left_box ul li:first-child {
  padding-left: 0;
}

.usr_info .usr_info_left_box ul li:last-child {
  border: none;
}

.exp {
  border-radius: 12px;
  transition-duration: .75s;
  padding: 20px 0;
  margin: 12px 0;
}

.exp:hover {
  box-shadow: 0 0 5px #9f9f9f;
}

.shadow {
  transition-duration: .75s;
}

.shadow:hover {
  box-shadow: 0 0 5px #9f9f9f;
}

.exp_title {
  padding: 0 0 20px;
  font-weight: bold;
}

.item {
  position: relative;
}

.item .edit_button {
  opacity: 0;
  transition-duration: .5s;
}

.item:hover .edit_button {
  opacity: 1;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
